<script setup lang="ts">
import { onMounted, ref } from 'vue';
import httpClient from '../utils/HttpClient';
import { type Result } from 'spen-common/src/Result';
import { type WordTypeEntity } from 'spen-common/src/entity/WordEntity';
import { useRouter } from 'vue-router';
const directory = ref<WordTypeEntity[] | null>();
const router = useRouter();
const index = ref(0);
async function getWordDirectory(): Promise<Result<WordTypeEntity[]> | null> {
    let result = await httpClient.get('/word/directory');
    if (result.status == 200) {
        return <Result<WordTypeEntity[]>>result.data;
    }
    return null;
}

async function getWord() {
    let result = await httpClient.get("/word/word/1");
}

onMounted(async () => {
    directory.value = (await getWordDirectory())?.data;
})

function to(data: WordTypeEntity) {
    router.push({
        path: '/word',
        query: {id: data.id}
    })
}

function toOnlyWords(data: WordTypeEntity) {
    router.push({
        path: '/onlyword',
        query: {id: data.id}
    })
}
</script>

<template>
    <div id="home">
        <ul id="word-directory">
            <li style="list-style: none;" v-for="dir in directory" :key="dir.id" @click="to(dir)">
                {{ dir.id }} - {{ dir.name }}
            </li>
        </ul>

        <ul id="word-directory">
            <li style="list-style: none;" v-for="dir in directory" :key="dir.id" @click="toOnlyWords(dir)">
                {{ dir.id }}  - {{ dir.name }} - 仅单词
            </li>
        </ul>
    </div>
</template>
<style lang="less" scoped>
#home {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

#word-directory {
    display: flex;
    text-align: center;
    flex-direction: column;
}

#word-directory :deep(> li) {
    background-color: #adababb9;
    margin-top: 1px;
    padding: 15px 19px;
    user-select: none;
}

#word-directory :deep(> li):hover {
    background-color: rgb(138, 135, 141);
}
</style>
